<template>
  <div class="home">
    <Sidebar></Sidebar>
    <div :class="['appmain',siderBarShow?'mar250':'mar0']">
      <Head class="apphead"></Head>
      <BreadCrumb class="appbreadcrumb"></BreadCrumb>
      <Main></Main>
    </div>
  </div>
</template>

<script>
import Head from './components/head'
import Main from './components/main'
import Sidebar from './components/sidebar/siderbar'
import BreadCrumb from './components/breadcrumb'
import {mapState} from 'vuex'
export default {
  components: {
    Head,
    Main,
    Sidebar,
    BreadCrumb
  },
  computed: {
    ...mapState([
      'siderBarShow'
    ])
  },
  created () {
  }
}
</script>

<style lang="less" scoped>
.home{
  width: 100%;
  height: 100%;
  .appmain{
    flex: 1;
    height: 100%;
    background: rgb(240, 242, 245);
    margin-left: 250px;
    transition: margin-left 0.5s;
    &.mar250{
      margin-left: 250px;
    }
    &.mar0{
      margin-left: 0px;
    }
  }
}
@keyframes mainmargin{
  0%{margin-left: 250px;}
  100%{margin-left: 0px;}
}
</style>
